<template>
  <!-- 初始化echarts需要个有宽高的盒子   -->
  <div>
    <!-- <el-input placeholder="请输入内容" v-model="$store.state.indexCode" clearable @clear="GetFSData">
      <el-button slot="append" icon="el-icon-search" @click="GetFSData"></el-button>
    </el-input> -->
    <!-- Echarts图必须给宽高 -->
    <div ref="chartMin" style="width:640px;height:390px;" id="charts"></div>
  </div>
</template>

<script>
// 1. 导入 echarts
import echarts from 'echarts'
import jsonp from 'jsonp'
// 放入data里面会监听所有的属性
/* const option= {
  xAxis:[
    {
      type:'category',
      data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
    }
  ],
  yAxis: [{
      type: 'value'
    }],
  series:[{
    data:[820,932,901,934,1290,1330,1320],
    type:'line'
  }]
} */
  export default {
    data() {
      return{
        // 第一个grid的数据（折线图）
        grid1Data: [],
        // 第二个grid的数据（柱状图）
        grid2Data: [],
        // 第三个grid数据（折线图）
        grid3Data: [],
        grid3DateData:[],
        // 第四个grid数据（柱状图）
        grid4Data: [],
        grid4DateData:[],
        // 柱状图的颜色
        // 柱状图的红绿规则比较麻烦，所以本次采用的规则则是根据价格的涨跌来区分
        volumeColor1: [],
        volumeColor2: [],

        UP_COLOR: "#E24528",
        DOWN_COLOR: "#009933",
        NORMAL_COLOR: "#33353C",

        // 查询股票代码
        // stockID:'1399300',
        // y轴和x轴坐标刻度值
        priceMax: 0,
        priceMin: 0,
        priceInterval: 0,
        volumeMax: 0,
        volumeMin: 0,
        volumeInterval: 0,
        lastPrice: 0,
        // ,
        a: 'sh600000',
        data1: [],
        data2: [],
        data3: [],
        timeArr:[]
      }
    },
    methods: {
      colorCls(num){
        // 用_chart而非this
        if(num > this.lastPrice){
          return "red";
        }else if(num == this.lastPrice){
          return "";
        }
        return "green";
      },
      // 后面设置定时获取实时数据时，this指向已经发生变化，不再指向vue对象，而是指向Windows，注意要先将this保存在自身this中
      GetFSData(){
        // this.chart.clear();
        console.log('-------------------------------');
        console.log('当前查询的股票代码：'+ this.$store.state.indexCode);
        /* 网易财经当日分时图数据：JSON数据（非jsonp请求要考虑跨域，如Ajax）。缺点不能获取分钟线数据
        方法：
        获取的数据依次是count节点数量、data、lastVolume、name股票名称、symbol股票代码、yestclose昨日收盘价
        data数组中依次是：小时分钟时间（0）、价格（1）、均价（2）、成交量（3） */
        jsonp('https://img1.money.126.net/data/hs/time/today/'+this.$store.state.indexCode+'.json',{},(err,res)=>{
          if(!err){
            console.log(res);
            // console.log('当天时间：'+ res.date);
            this.lastPrice = res.yestclose
            // console.log('昨日收盘价：'+ this.lastPrice);
            console.log('-------------------------------');
            // console.log(new Date(res.data[0][0]).getTime());
            // let t='2020-04-30 09:30:00'
            /* let time=new Date('2020-4-30 09:30');
            console.log(time.getTime()); */
            let d = res.date;
            let dg = d.substr(0,4)+'-'+d.substr(4,2)+'-'+d.substr(6,2);
            // console.log(dg);
            /* let t= res.data[0][0];
            let tg = t.substr(0,2)+':'+t.substr(2,2);
            console.log(tg);
            console.log(d+' '+t);
            console.log(dg+' '+tg);  */           
            
            // let hh = time.getHours();
            // console.log(time.substring(0,2));

            /* 上方折线图y轴坐标轴线为9条（雪球为9条；网易为5条），可以使用splitNumber设置。
            然后定义左侧数据变量priceMax、priceMin、priceInterval（priceInterval表示价格的差值），以及左边的数据数组grid1Data，右边的数据数组grid3Data。
            下方的柱状图一共是3条坐标轴线，设置splitNumber属性为3即可。
            定义变量volumeMax，volumeMin，volumeInterval（volumeInterval表示价格的差值），以及左边的数据数组grid2Data，右边的数据数组grid4Data；
            新建两个数组volumeColor1，volumeColor2来存放柱子的颜色。 */
            for (var i in res.data){
              // console.log(i);
              // 所有的时间数据
              // console.log(res.data[i][0]);
              /* let time=new Date('2020-4-30 09:30:00');
              console.log(time.getTime()); */
               /* 
                将日期数据转换时间戳存入gridData中，如果直接将从网易财经请求过来的日期字符串存进去，需要自己再设置一下X轴日期刻度值
                时间戳存入gridData后，再利用格式化方法将其设置在坐标轴

                */
              let t= res.data[i][0];
              let tg = t.substr(0,2)+':'+t.substr(2,2);
              // console.log(tg);
              // console.log(d+' '+t);
              // console.log(dg+' '+tg); 
              let sjc=dg+' '+tg
              // console.log(sjc);
              let timer=new Date(sjc).getTime()
              // var timeArr=[];
              this.timeArr.push(timer);
              /* console.log(this.timeArr);
              console.log(this.timeArr.length); */
              // 上午的数据

              if(i < 121){
                if(res.data[i][1] > this.priceMax){
                  this.priceMax = res.data[i][1]
                }
                // 此处priceMin初始是0，第一次循环是会给当天开盘价的值，然后再与后来的价格比较取最低价作为折线图Y轴最低刻度值
                if(res.data[i][1] < this.priceMin || this.priceMin == 0){
                  this.priceMin = res.data[i][1]
                }
                // 左上方（上午）折线图数据
                this.grid1Data.push([this.timeArr[i],res.data[i][1]])
                
                if(res.data[i][3] > this.volumeMax){
                  this.volumeMax = res.data[i][3]
                }
                // 其实最低交易量就是0，与上方折线图不同，柱状图Y轴的最低刻度值就是0
                if(res.data[i][3] < this.volumeMin){
                  this.volumeMin = res.data[i][3]
                }

                // 设置左下方（上午）柱状图颜色
                // // 上午由于有一个初始值，当天开盘价需要与昨日收盘价比较，因为这里是以昨日收盘价作为基准线的，所以要做嵌套判断
                if(i == 0){
                  if(res.data[i][1] >= this.lastPrice){
                    // 柱状图的红绿颜色变换规则在此以价格的涨跌来指定，分别
                    this.volumeColor1.push(this.UP_COLOR) 
                  }else{
                    this.volumeColor1.push(this.DOWN_COLOR)  
                  }
                }else{
                  // 当前时刻价格需要与下一时刻价格比较
                  if(res.data[i][1] >= res.data[i-1][1]){
                    this.volumeColor1.push(this.UP_COLOR)                    
                  }else{
                    this.volumeColor1.push(this.DOWN_COLOR)                    
                  }
                }
                // 左下方（上午）柱状图数据
                // this.grid2Data.push([res.data[i][0],res.data[i][3]])              
                this.grid2Data.push([this.timeArr[i],res.data[i][3]])              
              }else{
                // 下午的数据
                if(res.data[i][1] > this.priceMax){
                  this.priceMax = res.data[i][1]
                }
                if(res.data[i][1] < this.priceMin || this.priceMin == 0){
                  this.priceMin = res.data[i][1]
                  console.log('最低价' + this.priceMin);
                }
                // 右上方（下午）折线图数据
                /* 
                    解决初步绘制好Echarts分时图后的小bug：
                  1、第一个grid与第三个grid之间的折线图是断开的：因为11:00的股价（即第一个grid的最后一条数据的值）与11:30的股价（即第三个grid的第一条数据的值不一样
                    解决方案：先加一条数据到grid3Data中，这条数据的值为11:30的股价，即grid4Data中的第一条数据。如此grid3Data最后一条数据的值与grid4Data第一条数据的值相同就可以连起来了
                  2、但是还有一个小问题就是由于X轴类型是'time'类型，由时间间隔中间会有一条长直线
                    解决方案：将第三个grid与第四个grid的'time'类型改成'category'类目类型。
                    并且还要新建两个数组(grid3DateData、grid4DateData)来存放X轴的时间，然后原grid3Data和grid4Data不再存放数组，而是单独存放股价和成交量

                */
                // this.grid3Data.push([this.timeArr[i],res.data[i][1]])
                // 第三grid的数据先添加一条数据
                console.log('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');                
                if(this.grid3Data.length === 0){  
                  this.grid3Data.push(res.data[i-1][1]);
                  this.grid3DateData.push(this.timeArr[i-1]);
                    
                }
                // 右上方折线图
                this.grid3Data.push(res.data[i][1]);
                this.grid3DateData.push(this.timeArr[i]);

                if(res.data[i][3] > this.volumeMax){
                  this.volumeMax = res.data[i][3]
                }
                if(res.data[i][3] < this.volumeMin){
                  this.volumeMin = res.data[i][3]
                }
                // 设置柱状图颜色
                // 上午由于有一个初始值，所以要做嵌套判断，下午不需要
                if(res.data[i][1] >= res.data[i-1][1]){
                  this.volumeColor2.push(this.UP_COLOR)                    
                }else{
                  this.volumeColor2.push(this.DOWN_COLOR)                    
                }
                // 右下方（下午）折线图数据
                // this.grid4Data.push([this.timeArr[i],res.data[i][3]])  
                // 第四grid的数据先添加一条数据

                if(this.grid4Data.length == 0){
                  this.grid4Data.push(res.data[i-1][3]);
                  this.grid4DateData.push(this.timeArr[i-1]);
                }
                // 右下方折线图
                this.grid4Data.push(res.data[i][3]);
                this.grid4DateData.push(this.timeArr[i]);  
              }
            }
            /* console.log(this.timeArr);
            console.log(this.timeArr.length);
            console.log(this.grid4DateData.length);
            console.log(this.grid4DateData); 
            console.log(typeof this.grid4DateData); 
            console.log(typeof this.timeArr);  */

            /* 重新计算价格的最大最小值，以达到对称的效果 
              1、如果上涨的幅度大于下跌的幅度，即：|最高价-昨日收盘价|>|昨日收盘价-最低价|
                那么：折线图Y轴最低刻度值 = 准基线值 - 准基线与最高刻度差值
              2、如果下跌的幅度大于上涨的幅度，即：|最低价-昨日收盘价|>|昨日收盘价-最高价|
                那么：折线图Y轴最高刻度值 = 准基线值 + 准基线与最低刻度差值
            */
            /* console.log('昨日收盘价：'+this.lastPrice);
            console.log('最高价：'+this.priceMax);
            console.log('最低价：'+this.priceMin); */
           
            if((this.lastPrice - this.priceMax) * -1 > (this.lastPrice - this.priceMin)){
              this.priceMin = (this.lastPrice - ((this.lastPrice - this.priceMax)* -1));
              console.log('最低刻度值：'+this.priceMin);
            }else{
              this.priceMax =(this.lastPrice + (this.lastPrice - this.priceMin));
              console.log('最高刻度值：'+this.priceMax);
            }
            // 处理Y轴刻度值之间的差值，从而计算出每条刻度线所对应的值
            // 差值还需要取整
            this.priceInterval = (this.priceMax - this.lastPrice) / 4;
            console.log('差价：'+this.priceInterval);
            console.log('最大交易量：'+this.volumeMax);
            
            this.volumeInterval = this.volumeMax / 2;
            console.log('交易差量：'+this.volumeInterval);

            // this.chart.setOption()里面的this已经不再指向vue对象了，而是指向函数的调用者要将指向vue对象的this重新保存到方法自身this中
            let _chart=this;
            // 先清空
            // this.chart.clear();
            // this.chart.dispose();
            // this.clearchart()

            // this.initchart();
            // echarts折线图的配置项
            this.chart.setOption({
              toolbox: {
                show: true,
                showTitle: false, // 隐藏默认文字，否则两者位置会重叠
                feature: {
                  saveAsImage: {
                    show: true,
                    excludeComponents:['toolbox'],
                    pixelRatio:2
                  }
                }
              },
              animation:false,
              // 坐标轴指示器
              axisPointer:{
                show:true,
                // 配置线条风格为虚线风格
                lineStyle:{
                  type:'dashed'
                },
                link:[
                  {
                      xAxisIndex:[0,1],
                  },{
                      xAxisIndex:[2,3],
                  },{
                      yAxisIndex:[0,2]
                  },{
                      yAxisIndex:[1,3]
                  }
                ]
              },
              // 提示信息的悬浮框
              tooltip:{
                // 通过坐标轴触发。
                // item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；none：什么都不触发。
                trigger:'axis',
                // 将提示框的位置固定
                /* 
                  position：可以是字符串，数组，回调函数。这里要定义高度，用回调函数。
                    回调函数返回一个对象，对象里面是使用top，right，bottom，left属性来控制位置的，我们可以根据回调函数里的5个回调参数来进行相应的配置，这5个回调参数分别是：
                    point: 鼠标位置，如 [20, 40]。
                    params: 同 formatter 的参数相同。
                    dom: tooltip 的 dom 对象。
                    rect: 只有鼠标在图形上时有效，否则就是undefined，要想鼠标能放到提示框上，要配置enterable属性为true。是一个用x, y, width, height四个属性表达的图形包围盒。
                    size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
                
                */
                position:function(point, params, dom, rect, size){
                  var obj ={
                    // 将提示框固定在头部
                    top:10
                  }
                  /* size:{viewSize:[Echarts宽，Echarts高],contentSize:[]} */
                  // console.log(size); 
                  
                  // 判断鼠标在左还是在右，鼠标在左边图表的时候，提示框在右边，鼠标在右侧图表的的时候，提示框在左边，那么就要对返回对象的left值或者right值进行配置
                  // 用size的viewSize结合point鼠标位置属性来对提示框进行一个位置的定位。
                  if(point[0] > size.viewSize[0] / 2){
                    // 鼠标在左
                    obj["left"] = 70;
                  }else{
                    obj["right"] = 70;
                  }
                  return obj;
                },
                /* 
                  将提示框的文字进行一次格式化，在formatter的回调函数中进行配置。因为提示框的渲染方式renderMode，默认是html，所以回调函数里面我们可以配合CSS来编写我们自己的html。formatter的回调参数有3个，分别是：
                  1.params，这是提示框里面展示的数据的数据集。
                  2.ticket，这是异步回调的标识，数据格式跟params是一样的，一般配合第三个参数callback使用
                  3.callback，异步回调，与第二个参数ticket配合进行异步的数据展示。例如提示框中需要进行数据获取的请求时，可以用到这个组合。
                  这里无需异步请求数据，只需直接用params的数据展示。首先遍历params数据集，拿到里面的数据，再通过数据集的数据名称seriesName进行判断是什么数据，对数据进行格式化，最后拼接成一段html用于渲染。（注：seriesName可以在series中，对数据进行命名） 
                */
                formatter:function(params,ticket,callback){
                  var html = '';
                  var x,j,c;
                  // params是一个数组对象：包含两个对象，分别是折线图数据集和柱状图数据集
                  console.log(params);
                  
                  // 遍历params数据集数组对象
                  for(var d in params){
                    // console.log(params[d]);
                    // series里的每个grid的seriesName作为标识，取当前所在柱状图数据集对象
                    if(params[d].seriesName == '成交量1' || params[d].seriesName == '成交量2' ){
                      c = params[d];
                      console.log(c);
                    }
                    // series里的每个grid的seriesName作为标识，取当前所在折线图数据集对象
                    if(params[d].seriesName == '最新1' || params[d].seriesName == '最新2' ){
                      x = params[d];
                      console.log(x);
                    }
                  }
                  // c.axisValue标识柱状图X轴的时间戳，如果没有取到就代表鼠标当前不在grid上，return阻止程序向下运行
                  if(!c.axisValue){
                    return;
                  }
                  
                  // 时间
                  html += '<div class="tooltips-item"><span class="name">时间</span><span class="value">'+ echarts.format.formatTime('MM-dd hh:mm',parseFloat(c.axisValue)) +'</span></div>';
                  // 最新价：鼠标位于右侧，即下午时，data是number型数字（因为在处理11:30和13:00的衔接时，把grid3Data与grid4Data由数组改成了数值）
                  //         鼠标位于左侧时，data是数组[时间戳,价格]
                  html += '<div class="tooltips-item"><span class="name">最新</span><span class="value '+ _chart.colorCls((typeof x.data == 'number' ? x.data : x.data[1])) +'">'+ (typeof x.data == 'number' ? x.data.toFixed(2) : x.data[1].toFixed(2)) +'</span></div>';
                  // 涨跌幅
                  html += '<div class="tooltips-item"><span class="name">涨跌幅</span><span class="value '+ _chart.colorCls((typeof x.data == 'number' ? x.data : x.data[1])) +'">'+ ((((typeof x.data == 'number' ? x.data : x.data[1]) - _chart.lastPrice)/ _chart.lastPrice * 100).toFixed(2)) +'%</span></div>';
                  // 涨跌额
                  html += '<div class="tooltips-item"><span class="name">涨跌额</span><span class="value '+ _chart.colorCls((typeof x.data == 'number' ? x.data : x.data[1])) +'">'+ ((typeof x.data == 'number' ? x.data : x.data[1])- _chart.lastPrice).toFixed(2) +'</span></div>';
                  // 成交量
                  html += '<div class="tooltips-item"><span class="name">成交量</span><span class="value">'+ (typeof c.data == 'number' ? (c.data / 1000000).toFixed(2) : (c.data[1] / 1000000).toFixed(2)) +'万手</span></div>';

                  return html;
                },
                textStyle:{
                    color:"#000"
                },
                borderWidth:1,
                borderColor:"#ECEEF2",
                backgroundColor:"rgba(255,255,255,0.9)",
                transitionDuration:0,
                axisPointer:{
                  animation:false,
                  type:"cross"
                }
              },
                    // grid
              grid:[
                // 第一个grid
                {
                  top:'2.5%',// 图表的外边距
                  left:'5%',
                  height:'60%',// 图表的高度
                  width:'45%',//因为是左右各一个图表，使用百分比的方式显得更方便，
                },
                // 第二个grid，第二个图表是在第一个图表的下方，所以要把它定位到底部
                {
                  top:'67.5%',//设置上方的外边距是第一个图表的高度再加10，使用top是方便我们调整下方grid的高度
                  left:'5%',
                  width:'45%',// 宽度与第一个图表一个大
                  height:'25%'
                },
                // 第三个grid，第三个图表是在第一个图表的右方，所以要把它定位到右方
                {
                  top:'2.5%',// 图表的外边距
                  left:'50%',//设置右边图表的左边距是第一个图表的大小，达到定位右边的效果
                  width:'45%',// 宽度与第一个图表一个大
                  height:'60%'
                },
                // 第四个grid，第四个图表是在第三个图表的下方，所以要把它定位到底部
                {
                  top:'67.5%',//设置上方的外边距是第三个图表的高度再加10，使用top是方便我们调整下方grid的高度
                  left:'50%',//设置右边图表的左边距是第三个图表的大小，达到定位右边的效果
                  width:'45%',// 宽度与第一个图表一个大
                  height:'25%'
                }
              ],
              // 多个图表则会存在对个x轴y轴，所以这里的配置我们也换成数组的方式
              // x轴配置，
              xAxis:[
                // 第一个grid的x轴属性
                {
                  // 告诉echarts，这个第一个grid的x轴
                  gridIndex:0,
                  // 坐标轴是否留白
                  boundaryGap:false,
                  // x轴的刻度（刻度值旁的短线）
                  axisTick:{show:false},
                  // x轴的刻度值
                  axisLabel:{show:false},
                  max:'dataMax',
                  min:'dataMin',
                  type: 'time',
                  axisLine:{
                    lineStyle:{
                        color:"#ECEEF2"
                    }
                  },
                  splitLine:{
                    lineStyle:{
                      color:"#ECEEF2",
                      // 设置线条风格为虚线
                      type:"solid"
                    }
                  },
                  //坐标轴指示器
                  axisPointer:{
                    show:true,
                    // 指示器显示与否，grid1与grid3 X轴的指示器不显示
                    label:{
                      show:false
                    }
                  }
                },
                // 第二个grid的x轴属性
                {
                  // 告诉echarts，这个第个grid的x轴
                  gridIndex:1,
                  // 坐标轴是否留白
                  boundaryGap:false,
                  // x轴的刻度（刻度值旁的短线）
                  axisTick:{show:false},
                  max:'dataMax',
                  min:'dataMin',
                  type: 'time',
                  axisLabel: {
                    fontSize:12,
                    show: true,
                    color:'#888',
                    formatter: function (value) {
                      console.log('PEIZHIZHONGDE**********'+value);
                      let a = echarts.format.formatTime('hh:mm', value);
                      // let time=res.data[0][0];
                      // console.log(time.substr(0,2)+':'+time.substr(2,2));
                      console.log('-----------------------'+a);
          
                      if(a == "11:30"){
                        // 11:30与13:00未拼接前
                        // return "";
                        return "11:30/13:00"
                      }
                      if(a == "09:30"){
                        // 留一段缝隙让最左边的刻度值能完全显示出来，否则由于刻度值默认是位于每条柱状体的中间，当宽度过细时只能显示刻度值的一半
                        return "         09:30";
                      }
                      return a;
                    }
                  },
                  axisLine:{
                    lineStyle:{
                        color:"#ECEEF2"
                    }
                  },
                  splitLine:{
                    lineStyle:{
                      color:"#ECEEF2",
                      // 设置线条风格
                      type:"solid"
                    }
                  },
                  axisPointer:{
                    show:true,
                    type:"line",
                    label:{
                      show:true,
                      fontSize:10,
                      margin:0,
                      padding:2,
                      shadowBlur:0,
                      color:"#33353C",
                      formatter:function(data){
                        return echarts.format.formatTime('hh:mm', parseFloat(data.value))
                      }
                    }
                  }
                },
                // 第三个grid的x轴属性
                {
                  // 告诉echarts，这个第一个grid的x轴
                  gridIndex:2,
                  // 坐标轴是否留白
                  boundaryGap:false,
                  // x轴的刻度
                  axisTick:{show:false},
                  // x轴的刻度值
                  axisLabel:{show:false},
                  max:'dataMax',
                  min:'dataMin',
                  type: 'category',
                  data:_chart.grid3DateData,
                  axisLine:{
                    lineStyle:{
                        color:"#ECEEF2"
                    }
                  },
                  // X轴刻度值的分割线
                  splitLine:{
                    show:true,
                    lineStyle:{
                      color:"#ECEEF2",
                      // 设置线条风格为实线
                      type:"solid"
                    },
                    interval:function(index,value){
                      // 第一条第二条线是不需要显示的，第一条是11：30的，第一个grid已经有这条数据了，所以不需要显示
                      // 第二条显示的话，在中间部分会出现2条线，所以也不要显示
                      if(index == 0 || index == 1){
                          return false;
                      }
                      // 这里的意思是第一条数据后，每30分钟显示一条线
                      if((index - 1) % 30 == 0){
                          return true;
                      }
                      return false;
                    }
                  },
                  //坐标轴指示器
                  axisPointer:{
                    show:true,
                    // 指示器显示与否，grid1与grid3 X轴的指示器不显示
                    label:{
                      show:false
                    }
                  }
                },
                // 第四个grid的x轴属性
                {
                  // 告诉echarts，这个第一个grid的x轴
                  gridIndex:3,
                  // 坐标轴是否留白
                  boundaryGap:false,
                  // x轴的刻度（刻度值旁的短线）
                  axisTick:{show:false},
                  max:'dataMax',
                  min:'dataMin',
                  type: 'category',
                  data:_chart.grid4DateData,
                  // x轴显示的数据
                  axisLabel: {
                    fontSize:12,
                    show: true,
                    showMinLabel:false,
                    color:'#888',
                    // 设置grid4的X轴刻度值的间隔（30分钟）
                    interval:function(index,value){
                      if((index - 1) % 30 == 0){
                        return true;
                      }
                      return false;
                    },
                    formatter: function (value) {
                      // 数值无法这样转换，全部转成08:00，时间戳可行
                      console.log('PEIZHIZHONGDE**********'+value);
                      // let a = echarts.format.formatTime('hh:mm', value);

                      /*
                        此时grid4的X轴类型已经是'category'类型不再是'time'类型了，相当于刻度值为string类型，需要使用parseFloat()函数解析刻度值
                        parseFloat(string)：解析一个字符串，并返回一个浮点数。
                        该函数指定字符串中的首个字符是否是数字，如果是，则对字符串进行解析，直到数字末端，然后以数字返回该数字，而非字符串
                        ------- 注意 -------
                        字符串中只返回第一个数字，若第一个字符不能被转换为数字会返回NaN；开头和结尾空格允许
                      */
                      let a = echarts.format.formatTime('hh:mm', parseFloat(value));
                      console.log('-----------------------'+a);
                      
                      // 11:30与13:00未拼接后，在grid3中定义了，这里无需再定义
                      /* if(a == "13:00"){
                        return "11:30/13:00";
                      } */
                      if(a == "15:00"){
                        return "15:00         ";
                      }
                      return a;
                    }
                  },
                  // X轴线
                  axisLine:{
                    lineStyle:{
                        color:"#ECEEF2"
                    }
                  },
                  splitLine:{
                    show:true,
                    lineStyle:{
                      color:"#ECEEF2",
                    // 设置线条风格为实线
                      type:"solid"
                    },
                    interval:function(index,value){
                      // 第一条第二条线是不需要显示的，第一条是11：30的，第一个grid已经有这条数据了，所以不需要显示
                      // 第二条显示的话，在中间部分会出现2条线，所以也不要显示
                      
                      if(index == 0 || index == 1){
                          return false;
                      }
                      // 这里的意思是第一条数据后，每30分钟显示一条线
                      if((index - 1) % 30 == 0){
                          return true;
                      }
                      return false;
                    }
                  },
                  axisPointer:{
                    show:true,
                    type:"line",
                    label:{
                      show:true,
                      fontSize:10,
                      margin:0,
                      padding:2,
                      shadowBlur:0,
                      color:"#33353C",
                      formatter:function(data){
                        return echarts.format.formatTime('hh:mm', parseFloat(data.value))
                      }
                    }
                  }
                }
              ],
              // y轴配置
              yAxis: [
                // 第一个grid的y轴属性
                {
                  // Y轴的刻度（刻度值旁的短线）
                  axisTick:{show:false},
                  splitNumber:9,
                  gridIndex:0,
                  // this指向；小数位太多左侧坐标轴刻度值异常，需要将数值格式化
                  max:_chart.priceMax,
                  min:_chart.priceMin,
                  interval:_chart.priceInterval,
                  // 左上方Y轴设置
                  axisLabel:{
                    fontSize:10,
                    margin:0,
                    // y轴的数值向内显示
                    align:"left",
                    // 数值格式化
                    formatter: function (value, index) {
                        return value.toFixed(2);
                    },
                    color: function (value, index) {
                        // 中间基准线的数值为黑色
                      if(parseFloat(value).toFixed(2) == _chart.lastPrice.toFixed(2)){
                          return _chart.NORMAL_COLOR;
                      }
                      
                      // 上涨区域的数字为红色
                      if(value > _chart.lastPrice){
                          return _chart.UP_COLOR;
                      }
                      
                      // 下方下跌的数值为绿色
                      if(value < _chart.lastPrice){
                          return _chart.DOWN_COLOR;
                      }
                    }
                  },
                  axisLine:{
                    lineStyle:{
                      color:"#ECEEF2"
                    }
                  },
                  splitLine:{
                    lineStyle:{
                      color:"#ECEEF2",
                      // 设置线条喂风格为虚线
                      type:"solid"
                    }
                  },
                  z:3,
                  axisPointer:{
                    show:true,
                    type:"line",
                    label:{
                      show:true,
                      fontSize:10,
                      margin:-44,
                      padding:2,
                      shadowBlur:0,
                      color:"#33353C",
                      formatter:function(data){
                        return data.value.toFixed(2);
                      }
                    }
                  }
                },
                // 第二个grid的y轴属性
                {
                  // Y轴的刻度（刻度值旁的短线）
                  axisTick:{show:false},
                  splitNumber:3,
                  gridIndex:1,
                  max:_chart.volumeMax,
                  min:0,
                  interval:_chart.volumeInterval,
                  axisLabel:{
                    // y轴的数值向内显示
                    align:"left",
                    verticalAlign:"top",
                    show:true,
                    fontSize:10,
                    margin:0,
                    showMaxLabel:true,
                    showMinLabel:true,
                    // clolor:"#000000",
                    color: function (value, index) {
                      return _chart.UP_COLOR
                    },
                    // 数值格式化
                    formatter: function (value, index) {
                        // return value.toFixed(2);
                        // 格式化成月/日，只在第一个刻度显示年份 
                        if(value == _chart.volumeMax){
                          // 方便演示
                          if(value > 1000000){
                              value = parseFloat(value / 1000000).toFixed(2)+"万手"
                          }
                          
                          return value;
                        }
                        return "";
                    }
                  },
                  axisLine:{
                    lineStyle:{
                      color:"#ECEEF2"
                    }
                  },
                  splitLine:{
                    lineStyle:{
                      color:"#ECEEF2",
                    // 设置线条喂风格为虚线
                      type:"solid"
                    }
                  },
                  axisPointer:{
                    show:true,
                    type:"line",
                    label:{
                      show:true,
                      fontSize:10,
                      padding:2,
                      shadowBlur:0,
                      color:"#33353C",
                      formatter:function(data){
                        if(data.value > 1000000){
                          return parseFloat(data.value / 1000000).toFixed(2)+"万手";
                        }
                        return data.value;
                      }
                    }
                  }
                },
                // 第三个grid的y轴属性
                {
                  // Y轴的刻度（刻度值旁的短线）
                  axisTick:{show:false},
                  splitNumber:9,
                  position:'right',
                  gridIndex:2,
                  max:_chart.priceMax,
                  min:_chart.priceMin,
                  interval:_chart.priceInterval,
                  // 右上方Y轴设置
                  axisLabel:{
                    fontSize:10,
                    margin:0,
                    // y轴的数值向内显示
                    align:"right",
                    formatter: function (value, index) {
                      let persent = (value - _chart.lastPrice) / _chart.lastPrice;
                      // 无需三元表达式做判断，计算出是负值会自动加上负号
                      // persent = (persent < 0) ? persent * -1 : persent;
                      persent = persent * 100;

                      return persent.toFixed(2) + '%';
                    },
                    color: function (value, index) {
                      // 中间基准线的数值为黑色
                      if(parseFloat(value).toFixed(2) == _chart.lastPrice.toFixed(2)){
                          return _chart.NORMAL_COLOR;
                      }
                      
                      // 上涨区域的数字为红色
                      if(value > _chart.lastPrice){
                          return _chart.UP_COLOR;
                      }
                      
                      // 下方下跌的数值为绿色
                      if(value < _chart.lastPrice){
                          return _chart.DOWN_COLOR;
                      }
                    }
                  },
                  axisLine:{
                    lineStyle:{
                      color:"#ECEEF2"
                    }
                  },
                  splitLine:{
                    lineStyle:{
                      color:"#ECEEF2",
                    // 设置线条喂风格为虚线
                      type:"solid"
                    }
                  },
                  z:3,
                  axisPointer:{
                    show:true,
                    type:"line",
                    label:{
                      show:true,
                      fontSize:10,
                      margin:-34,
                      padding:2,
                      shadowBlur:0,
                      color:"#33353C",
                      formatter:function(data){
                        var persent = (data.value - _chart.lastPrice) / _chart.lastPrice;
                        persent = (persent < 0) ? persent * -1 : persent;
                        persent = persent * 100;
                        return persent.toFixed(2) + '%';
                      }
                    }
                  }
                },
                // 第四个grid的y轴属性
                {
                  // Y轴的刻度（刻度值旁的短线）
                  axisTick:{show:false},
                  splitNumber:3,
                  position:'right',
                  gridIndex:3,
                  max:_chart.volumeMax,
                  min:0,
                  interval:_chart.volumeInterval,
                  axisLine:{
                    lineStyle:{
                      color:"#ECEEF2"
                    }
                  },
                  splitLine:{
                    lineStyle:{
                      color:"#ECEEF2",
                    // 设置线条喂风格为虚线
                      type:"solid"
                    }
                  },
                  //坐标轴指示器
                  axisPointer:{
                    show:true,
                    // 指示器显示与否，grid1与grid3 X轴的指示器不显示
                    label:{
                      show:false
                    }
                  }
                }
              ],
              // 数据可以通过xAxisIndex，yAxisIndex属性，来指定是哪个grid的数据
              series: [
                // 第一个图表的数据
                {
                  // 命名提示框数据，通过数据集的数据名称seriesName判断是什么数据，对数据进行格式化
                  name:"最新1",
                  // 平滑曲线
                  smooth:true,
                  // 是否显示折线上的圆点
                  symbol:'none',
                  // 线条颜色
                  lineStyle:{
                    color:"#0481F8",
                    width:1
                  },
                  xAxisIndex:0,
                  yAxisIndex:0,
                  data: _chart.grid1Data,
                  type: 'line',
                  z:3,
                  areaStyle:{
                    color:"#F8FAFF"
                  }
                },
                // 第二个图表的数据
                {
                  name:"成交量1",
                  xAxisIndex:1,
                  yAxisIndex:1,
                  // 柱状图柱子宽度
                  barWidth:1,
                  data: _chart.grid2Data,
                  type: 'bar',
                  // 设置柱状图颜色
                  itemStyle:{
                    normal: {
                      color: function (params) {
                        return _chart.volumeColor1[params.dataIndex];
                      }
                    }
                  }
                },
                // 第三个图表的数据
                {
                  name:"最新2",
                  // 平滑曲线
                  smooth:true,
                  // 是否显示折线上的圆点
                  symbol:'none',
                  // 线条颜色
                  lineStyle:{
                    color:"#0983F8",
                    width:1
                  },
                  z:3,
                  xAxisIndex:2,
                  yAxisIndex:2,
                  data: _chart.grid3Data,
                  type: 'line',
                  areaStyle:{
                    color:"#F8FAFF"
                  }
                },
                // 第四个图表的数据
                {
                  name:"成交量2",
                  xAxisIndex:3,
                  yAxisIndex:3,
                  // 柱状图柱子宽度
                  barWidth:1,
                  data: _chart.grid4Data,
                  type: 'bar',
                  // 设置柱状图颜色
                  itemStyle:{
                    normal: {
                      color: function (params) {
                        return _chart.volumeColor2[params.dataIndex];
                      }
                    }
                  }
                }
              ]
            })
          }
        })
        /* jsonp('https://stock.xueqiu.com/v5/stock/chart/minute.json?symbol=SH000001&period=1d',{},(err,res)=>{
          if(!err){
            console.log(res);
            console.log(res.data);
            console.log(res.date);
          }
        }) */
        // https://stock.xueqiu.com/v5/stock/chart/minute.json?symbol=SH000001&period=1d
      //  注意请求是异步的
      //  console.log(this.volumeMax);
        
      },
      getChart() {
        this.code = (this.a).slice(2);
        if (this.code[0] == 6) {
          this.type = 'sse';
        } else {
          this.type = 'szse';
        }
        let that=this
        // 第三方接口，需要实时刷新用的定时器，并未做websocket的处理，有需要可以自己加
        // this.timer = setInterval(() => {
        // vue项目中为了规范，跨域请求封装了jsonp的方法
        this.$jsonp('http://webstock.quote.hermes.hexun.com/a/minute?code='
        + this.type + this.code + '&start=20181026000000&number=500', {},(err,data) => {
          // const total = res.Data[0];
          // console.log('total');
          if(!err){
            console.log(data);
          }
          
          /* for (const j of Object.keys(total)) {
            const time = total[j][0] + '';
            const year = time.slice(0, 4);
            const month = time.slice(4, 6);
            const day = time.slice(6, 8);
            const hour = time.slice(8, 10);
            const minute = time.slice(10, 12);
            const second = time.slice(12, 14);
            const yeartwo = year + '-' + month + '-' + day;
            const timetwo = hour + ':' + minute + ':' + second;
            this.data1.push(timetwo);
            const chartprice = total[j][1] / 100;
            this.data2.push(chartprice);
            //昨收价是从另一个接口获取的
            const chg = parseFloat(Number((chartprice - this.yes) / this.yes * 100)).toFixed(2);
            this.data3.push(chg);
          }

          this.chart.setOption({
          // 图相对于容器的位置
            grid: {
              left: '10%',
              right: '10%',
              bottom: '10%',
            },
            tooltip : {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                animation: false,
                label: {
                  backgroundColor: '#505765',
                },
              },
            },
            // 下方滑块
            // dataZoom: [
            //     {
            //         show: true,
            //         realtime: true,
            //     },
            //     {
            //         type: 'inside',
            //         realtime: true,
            //     },
            // ],
            xAxis: [
              {
                type : 'category',
                boundaryGap : false,
                axisLine: {onZero: false},
                data : this.data1
                .map((str) => {
                    return str.replace(' ', '\n');
                }),
              },
            ],
            yAxis: [
              {
                name: '价格',
                type: 'value',
                scale: true,
                splitNumber: 4,
              },
              {
                name: '涨跌幅(%)',
                type: 'value',
                scale: true,
                splitNumber: 4,
                splitLine: false,
              },
            ],
            series: [
              {
                name: '价格',
                type: 'line',
                animation: false,
                symbol: 'none',
                lineStyle: {
                    width: 1,
                },
                data: this.data2,
              },
              {
                name: '涨跌幅',
                type: 'line',
                yAxisIndex: 1,
                animation: false,
                symbol: 'none',
                lineStyle: {
                  width: 1,
                  color: 'transparent',
                },
                markLine: {
                  silent: true,
                  // 去掉箭头
                  symbol: 'none',
                  data: [{
                      yAxis: 0,
                  }],
                  lineStyle: {
                      normal: {
                          type: 'dashed',
                          color: 'red',
                      },
                  },
                  label: {
                    formatter: '',
                  },
                },
                data: this.data3,
              },
            ],
          }); */
        });
        // },3000);
      },
      GetData(){
        jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',{},(err,data)=>{
          if(!err){
            console.log(data);
          }
        })
      },
      initchart() {
        if(!this.chart){
          // echarts.init(this.$refs.chartMin).dispose();
          // this.chart.dispose();
          
          this.chart = echarts.init(this.$refs.chartMin);
        }
      }/* ,
      setOption(){
        this.chart.setOption(this.echartsOption);
      } */
    },
    mounted () {
      this.initchart()
      this.GetFSData()
    }
  }

</script>

<style>

.tooltips-item{
  display:flex;
  display:-webkit-flex;
  justify-content: space-between;
  color:#33333c;
  font-size:10px;
  width:120px;
}
.red{
  color:#E24528
}
.gray {
  color:#33333c;
}
.green{
  color:#009933
}
</style>
